<!--
 * @Date: 2023-02-12 16:57:22
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-04-05 12:12:37
 * @FilePath: \A19\frontend\src\components\Watcher.vue
-->
<template>
  <div class="container watch-container">
    <div class="header title ver">
    <!-- <el-icon><ArrowLeftBold /></el-icon> -->
    监考——{{ testInfo?.name }}
  </div>
  
  <div class="videos">
    <div class="controls">
      <ElInput v-model="condition" style="width: 150px;margin-right: 20px;" placeholder="输入考生姓名、学号"></ElInput>
      <ElButton style="width: 90px;" type="primary" plain @click="find">查找</ElButton>
      <ElButton style="width: 90px;"  plain @click="broadCast">广播消息</ElButton>
      <ElButton style="width: 90px;float:right" type="primary" plain >刷新</ElButton>
    </div>
    <div v-for="(rtc,index) in currentRTCs" class="video">
      <video :key="rtc.target" :id="rtc.target" ref="videoRef" autoplay muted></video>
      <div class="stu">
        <span class="name">姓名：{{ students.find(s => s._id === rtc.target)?.name }}</span>
        <span class="number">学号：{{ students.find(s => s._id === rtc.target)?.number }}</span>
        <span class="exp">异常：{{ 0 }}次</span>
      </div>
      <div class="video-controls">
        <ElButton @click="screenOn(rtc.target)">全屏查看</ElButton>
        <ElButton plain type="warning" @click="remind(rtc.target)">提醒考生</ElButton>
        <!-- <ElButton type="primary" @click="mark(rtc.target)">标记考生</ElButton> -->
        <ElButton type="danger" @click="force(rtc.target)" plain>强制交卷</ElButton>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="pagination-block">
      <el-pagination
        next-text="下一页"
        prev-text="上一页"
        v-model:current-page="page"
        v-model:page-size="amount"
        :page-sizes="[6,12,18]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next,jumper"
        :total="students.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <div key="1" style="margin-left: 16px;display: flex;align-items: center;font-weight: 400; color: #606266;">
          <span style="margin-right: 8px;">转到:</span>
          <el-input @keydown.enter="goToPage" v-model="input" style="width:56px;margin-right: 5px;"/>
          <ElButton @click="goToPage">GO</ElButton>
        </div>
      </el-pagination>
    </div>
  </div>
  <!-- <video ref="videoRef" id="lo_video" autoplay muted></video> -->
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, computed, watch, watchEffect, onMounted } from 'vue';
import { useClientStore } from "@/pinia/stores/client";
//hooks
import { watcherhook } from '@/hooks/test/watcherhook';
import { tests } from '../shared/types/tests';
import { storeToRefs } from 'pinia';
import { useRoute, useRouter } from 'vue-router';

// const props = defineProps<{ testId:string }>();
const {client} = useClientStore()
const store = useClientStore();
const { currentUser } = store
const {currentCourseId} = storeToRefs(store)
const route = useRoute()
const router = useRouter()

const testId = route.params.testId as string
const testInfo = ref<tests>()

const { wsClient,students,videoRef,page,amount,currentRTCs,condition,find } = watcherhook(currentUser,testId)

const input = ref(1)
const goToPage = ()=>{
  page.value = input.value
}

//videoControl functions
const screenOn = (id:string | undefined)=>{
  if(!id) return
  const video = videoRef.value.find(video => video.id === id)
  if(video) video.requestFullscreen().then(async res =>{
    await wsClient.sendMsg('AMessages/RTC/TestConn',{
      type:'fullscreen',
      student:id,
      test:testId
    })
  },err =>{
    console.log(err);
  })
}
const remind = async (id:string | undefined) =>{
  try {
    const msg = await ElMessageBox.prompt('请输入信息')
    if(!msg.value){
      ElMessage.warning('请输入信息')
      return
    }
    const ret = await wsClient.sendMsg('AMessages/Test/Warn',{
      target:id as string,
      msg:msg.value,
      type:'warn',
      test:testId
    })
    if(ret.isSucc){
      ElMessage.success('提醒成功')
    }
  } catch (e){
  }
}
const broadCast = async () =>{
  try {
    const msg = await ElMessageBox.prompt('请输入信息')
    if(!msg.value){
      ElMessage.warning('请输入信息')
      return
    }
    const ret = await wsClient.sendMsg('AMessages/Test/Warn',{
      msg:msg.value,
      type:'warn',
      test:testId
    })
    if(ret.isSucc){
      ElMessage.success('广播成功')
    }
  } catch (e){
  }
}
const force = async (id:string | undefined) =>{
  try {
    await ElMessageBox.confirm('确定强制收卷吗？')
    const ret = await wsClient.sendMsg('AMessages/Test/Warn',{
      type:'force',
      test:testId,
      target:id as string
    })
    if(ret.isSucc){
      ElMessage.success('强制收卷成功')
    }
  } catch (error) {
  }
}


const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  input.value = val
}

onMounted(async () =>{
  if(!testId){
    ElMessage.error('不存在')
    router.back()
    return
  }
  const ret = await client.callApi('Get/GetTestInfo',{
    testId,
    examOrHomework:'exam'
  })
  if(ret.isSucc){
    testInfo.value = ret.res.testInfo
    currentCourseId.value = ret.res.testInfo.course
  }
})
</script>

<style lang="less" scoped>
.watch-container{
  padding-top:0;
  height: 100%;
}
.header{
  position: relative;
  // height: 40px;
  width: 100%;
  min-width: 992px;
  // line-height: 40px;
  // font-size: 20px;
  // font-weight: bold;
  // padding: 0 10px;
  // text-align: center;
  // color: #f7f7fa;
  // background-color: #62576c;
  i{
    position: absolute;
    height: 40px;
    left: 20px;
  }
}

.videos{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  justify-content: flex-start;
  align-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
  min-width: 992px;
  height: calc(100% - 100px);
  padding: 0 50px;
  background-color: #ffffff;
  .controls{
    position: relative;
    width: 100%;
    height: 40px;
    padding: 4px 3%;
    margin: 15px 0 25px 0;
  }
  .video{
    background-color: #f7f7fa;
    position: relative;
    width: 26.3%;
    aspect-ratio: 1.23529412;
    padding: 10px;
    margin: 0px 3.5%;
    margin-bottom: 80px;
    border-radius: 10px;
    text-align: center;
    .stu{
      display: inline-block;
      width: 90%;
      height: 30px;
      line-height: 30px;
      // background-color: aqua;
      text-align: left;
      &> span{
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 15px;
      }
      .name{
        width: 30%;
      }
      .number{
        width: 40%;
      }
      .exp{
        width: 30%;
      }
    }
    .video-controls{
      display: inline-flex;
      width: 90%;
      height: 70px;
      position: relative;
      top: 0;
      bottom: 0;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: center;
      .el-button{
        margin: 0;
        // width: 35%;
        // margin: 0px 2% ;
        // &:nth-of-type(n){
        //   margin-right:20% ;
        //   margin-left:0;
        // }
        // &:nth-of-type(2n){
        //   margin-right:0 ;
        //   margin-left:20% ;
        // }
      }
    }
    video{
      width: 90%;
      aspect-ratio: 16 / 9;
      // border: 2px solid;
      // background-color: #d7d7d7;
      background-color: #000;
    }
  }

}
.footer{
  width: 100%;
  min-width: 992px;
  height: 40px;
  position: relative;
  background-color: #f7f7fa;

  .pagination-block{
    height: 40px;
    line-height: 40px;
    text-align: center;
    &> .div{
      justify-content: center;
    }
    
  }
}
</style>

<style lang="less">
.footer{
  .pagination-block{
    .el-pagination{
      justify-content: center;
      
    }
  }
}

</style>
